.myOrder {
    .main {
        @include marginCenter(70%);

        .title {
            @include flex-between;
            text-align: center;
            width: 100%;
            height: 40px;
            background-color: #ddd;
            border: 1px solid $border-color;
            margin-bottom: 20px;

            p {
                width: 10%;

                &:nth-child(1) {
                    width: 70%;

                    span {
                        width: 14%;
                        display: inline-block;

                        &:nth-child(1) {
                            width: 72%;
                        }
                    }
                }
            }
        }

        .money {
            color: $money-color;
            font-weight: bold;
        }

        .content {
            width: 100%;
            border: 2px solid $border-color;
            text-align: center;
            margin-bottom: 20px;
            position: relative;
            box-sizing: border-box;

            &:hover {
                border: 2px solid #aaa;
            }

            .hoverShow {
                position: absolute;
                right: 15px;
                top: 5px;
                @include flex-between;

                i {
                    font-size: 22px;
                    cursor: pointer;

                    &:hover {
                        color: $theme-color;
                    }
                }
            }

            .content-main {
                @include flex-between;
                align-items: flex-start;
                width: 100.08%;
                .main-table {
                    width: 100%;

                    .thead {
                        line-height: 40px;
                        background-color: #ddd;

                        th {
                            &:nth-child(1) {
                                text-align: left;
                                padding-left: 30px;
                                width: 70%;

                                .date {
                                    font-weight: bold;
                                }
                                .lost{
                                    color: red;
                                }

                                .order {
                                    padding-left: 20px;
                                }
                            }

                            &:nth-child(2) {
                                width: 30%;
                            }
                        }
                    }

                    .tbody {
                        td {
                            width: 10%;
                            border-left: 1px solid $border-color;
                            vertical-align: middle;

                            &:nth-child(1) {
                                width: 70%;

                                .imgName {
                                    display: flex;
                                    border-bottom: 1px solid $border-color;

                                    &>div {
                                        width: 14%;
                                        padding: 15px;

                                        &:nth-child(1) {
                                            width: 72%;
                                            @include flex-between;
                                            justify-content: flex-start;
                                            padding-left:30px;
                                            img {
                                                width: 15%;
                                                height: 100%;
                                                margin-right: 15px;
                                            }

                                            text-align: left;

                                        }

                                        &:nth-child(3) {
                                            p {
                                                padding: 5px 0;
                                                cursor: pointer;

                                                &:nth-child(1) {
                                                    &:hover {
                                                        color: $theme-color;
                                                    }

                                                }

                                                &:nth-child(2) {
                                                    &:hover {
                                                        color: red;
                                                    }

                                                }
                                            }

                                        }
                                    }
                                }
                            }
                        }

                        .success {
                            color: $theme-color;
                        }

                        .colse {
                            color: $des-color;
                        }

                        .pay {
                            span {
                                display: inline-block;
                                color: red;
                                cursor: pointer;
                                position: relative;
                                width: 100%;
                                height: 21px;

                                &::after {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    right: 0;
                                    bottom: 0;
                                    margin: auto;
                                    content: '待付款';
                                }

                                &:hover {
                                    &::after {
                                        content: '点击付款';
                                        text-decoration: underline;
                                    }
                                }
                            }
                        }

                    }
                }
            }
        }
    }

    .hover {
        cursor: pointer;

        &:hover {
            color: $theme-color;
        }
    }
}